<template>
  <el-dialog :title="form.id ? '编辑' : '新增'" v-model="drawer" width="500px" :append-to-body="true" @close="close">
    <el-form :model="form" size="small" label-width="140px" ref="ruleRefForm" :rules="rules">
      <el-form-item label="上级类型" prop="pid" v-if="!form.id || form.pid != 0">
        <el-select v-model="form.pid" placeholder="请选择上级类型" clearable filterable>
          <el-option value="0" label="无"/>
          <el-option v-for="item in parentList" v-show="item.type == form.type" :key="item.id" :value="item.id" :label="item.name"/>
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input placeholder="请输入名称" v-model="form.name" clearable style="width: 180px"/>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio :label="0">收入</el-radio>
          <el-radio :label="1">支出</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-radio-group v-model="form.state">
          <el-radio :label="1">显示</el-radio>
          <el-radio :label="0">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序号" prop="sort">
        <el-input-number v-model="form.sort" :controls="false"/>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="resetForm(ruleRefForm)">取消</el-button>
        <el-button type="primary" size="small" @click="submitForm(ruleRefForm)">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {computed, reactive, ref, toRefs} from 'vue'
import capitalTypeApi from '/@/api/money/capitalType'
import {ElMessage} from 'element-plus'

export default {
  name: 'CreateClassify',
  props: {
    dialogDrawer: {
      type: Boolean,
      default: false
    },
    defaultForm: {
      type: Object,
      default: null
    }
  },
  emits: ['onDetailSubmit'],
  setup(props, context) {
    const {dialogDrawer, defaultForm} = toRefs(props)
    const ruleRefForm = ref()
    const drawer = computed({
      get: () => {
        if (dialogDrawer.value) {
          // 获取全部一级类型
          capitalTypeApi.getRoots().then(res => state.parentList = res.data).catch(e => console.log(e))
          if (defaultForm.value && defaultForm.value.id) {
            state.form = JSON.parse(JSON.stringify(defaultForm.value))
          }
        }
        return dialogDrawer.value
      },
      set: val => context.emit('update:dialogDrawer', val)
    })
    const state = reactive({
      form: {
        id: null,
        pid: 0,
        name: null,
        sort: 0,
        state: 1,
        type: 0
      },
      rules: {
        name: {required: true, message: '请填写名称', trigger: 'blur'}
      },
      parentList: []    // 一级类型列表
    })
    // 关闭
    const close = () => {
      context.emit('update:dialogDrawer', false)
      state.form = {
        id: null,
        pid: null,
        name: null,
        sort: 0,
        state: 1,
        type: 0
      }
    }
    //提交
    const submitForm = (formEl) => {
      formEl.validate(async (valid) => {
        if (!valid) {
          return false
        }
        let res
        // 修改
        try {
          if (state.form.id) {
            res = await capitalTypeApi.edit(state.form)
          } else {  // 添加
            res = await capitalTypeApi.create(state.form)
          }
          if (res.data) {
            ElMessage.success('保存成功！')
            close()
          }
        } catch (e) {
          console.log(e)
        }
      })
    }
    // 取消提交
    const resetForm = (formEl) => {
      if (!formEl) return
      context.emit('update:dialogDrawer', false)
      formEl.resetFields()
    }


    return {
      ...toRefs(state),
      ruleRefForm,
      drawer,
      close,
      submitForm,
      resetForm
    }
  }
}
</script>

<style scoped lang="scss">
.item-row {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  cursor: pointer;
  width: 60px;
  height: 60px;
  border: 1px dashed #eee;
  font-size: 18px;
  color: #666;
}
</style>
